<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>

<body>
    <div id="main">
        <qilian-tip type="red" top="6rem" right="6rem">{{msg}}</qilian-tip>
        <form class="login" @submit.prevent="login">
            <div class="form-title">祁连山国家公园管理端</div>
            <div class="form-item">
                <input v-model.trim="name" type="text" name="name" placeholder="请输入用户名" autocomplete="off" required>
            </div>
            <div class="form-item">
                <input v-model.trim="password" type="password" name="password" placeholder="请输入密码" autocomplete="off" required>
            </div>
            <div class="form-item">
                <button class="button-primary button-hover" type="submit" :keyup.enter="login">提交</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/qs.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/public.js"></script>
    <script type="text/javascript">
    const app = new Vue({
        el: '#main',
        data: {
            name: '',
            password: '',
            msg: '请登录'
        },
        created: function() {
            this.$options.methods.checkLogin(this);
        },
        methods: {
            checkLogin: function(that) {
                axios.get(that.$host + 'isLogin.php')
                    .then(function(response) {
                        if (parseInt(response.data.code) == 0) {
                            window.location.href = "index.html";
                        } else {
                            localStorage.removeItem('userinfo');
                        }
                    })
                    .catch(function(err) {
                        console.log(err)
                    });
            },
            login: function() {
                let that = this;
                axios({
                    method: 'post',
                    url: that.$host + 'login.php',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data: Qs.stringify({
                        name: that.name,
                        password: that.password
                    })
                }).then(response => {
                    if (response.data.code == 0) {
                        const userinfo = {
                            id: response.data.data.id,
                            name: response.data.data.name,
                            email: response.data.data.email,
                            power: response.data.data.power
                        };
                        localStorage.setItem('userinfo', JSON.stringify(userinfo));
                        window.location.href = 'index.html';
                    } else {
                        that.msg = response.data.msg;
                        localStorage.removeItem('userinfo');
                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    });
    </script>
</body>

</html>